.container {
    position: relative;

    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;

    width: 100%;
    margin-top: 56px;

    background-color: #f3f3f3;

    .code-contail {
        position: absolute;
        top: 100px;
        right: 10%;

        width: 240px;
        height: 276px;

        background: #ffffff;
        box-shadow: 0px 4px 18px 0px rgba(204, 204, 204, 1);

        .head-text {
            height: 56px;

            text-align: center;

            color: #33302d;
            border-bottom: 1px solid #eaeaea;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 56px;
        }
        .head-contail {
            display: flex;
            align-items: center;
            flex-direction: column;

            padding: 24px 50px;

            .head-code {
                width: 140px;
                height: 140px;

                line-height: 140px;
                .head-err {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;

                    color: var(--el-text-color-placeholder);
                    background: var(--el-fill-color-light);
                }
            }
            .head-tips {
                margin-top: 16px;

                color: #666666;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 14px;
                font-weight: 400;
            }
        }
    }
    .zw-qrcode {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .center {
        overflow: auto;
        flex-grow: 1;

        height: calc(100vh - 56px);

        .preview {
            position: relative;

            display: flex;
            justify-content: center;

            width: 100%;

            .preview-mask {
                position: absolute;
                z-index: 1;

                width: 100%;

                opacity: 0;
            }

            .iframe-mask {
                position: absolute;
                // background-color: blueviolet;
                // opacity: 0.3;
                z-index: 2;

                overflow: hidden;

                width: 375px;
                margin: 160px 0;

                opacity: 0;

                .iframe-mask-item {
                    // background-color: green;
                    // opacity: 0.3;
                    opacity: 0;
                }
            }
        }
    }
}

.head {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 56px;

    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(240, 236, 232, 1);

    .head-preview {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        height: 56px;
        padding: 0 24px;
    }
    .square {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 100%;
        padding: 0 24px;

        line-height: 56px;

        .savetime {
            color: #969696;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
        }
        .all {
            display: flex;
            align-items: center;
        }
        .left {
            display: flex;
            align-items: center;

            cursor: pointer;

            &:hover {
                color: #ff6600;
            }
        }
        .right {
            float: right;
        }
        .firstimg {
            width: 16px;
            height: 16px;
        }
        .hove {
            cursor: pointer;
        }
        .fontstyle {
            margin-left: 5px;

            color: #585858;

            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
        }
        .space {
            margin-right: 36px;
        }
    }
}
